<template>
  <div>
      <h1>{{num}}</h1>
      <button v-on:click="num++">+</button>
      <button @click="num--">-</button>
      <hr>
      <h2>{{num}}</h2>
      <!-- 在template模板中如果要调用的是无参数的函数可以写小括号，也可以不写括号都可以 -->
      <button @click="increment">+</button>
      <button @click="decryment()">-</button>
  </div>
</template>

<script>
/*
 * 计数器的实现思路
   1、首先在data定义一个变量num
   2、在template模板中使用插值表达式来进行渲染 
   3、在指定元素上使用v-on:事件类型=""方式来进行事件的绑定
      可以使用@click这种简写的方式来对事件进行绑定
 */
export default {
  //在data函数定义的数据都是响应式数据(只要数据发生变化，页面也会自动发生变化)
  data(){
    return{
      //定义在data中的数据可以作为VueComponent实例的成员
      num:0
    }
  },
  //methods这个选项中，主要完成事件处理函数的编写，以及自定义函数编写
  methods:{
    //methods选项中的函数的语法:函数名(){}
    increment(){
      //如果要在methods选项中的函数中去访问data中的定义的数据，不能直接使用名称获取
      this.num++
      console.log(`num的数据是:${this.num}`);
    },
    decryment(){
      console.log('##################');
    }
  }
}
</script>

<style>

</style>